<html>

	<style>
		/* nice page framework */
		hr {border: 0; border-top: 1px solid lightgray; border-bottom: 1px solid lightgray}
		h1 {font-family: verdana; font-size: 40px; text-align: center}
		div.d1 {position: relative; overflow: hidden; width: 100%; height: 40px}
		div.d2 {position: relative; float: left; width: 15%; font-family: verdana; font-size: 30px; color: gray;}
		div.d3 {position: relative; float: left; width: 85%; font-family: verdana; font-size: 30px; color: black;}

		/* nice switch control */
		.switch {position: relative; display: inline-block; width: 60px; height: 34px}
		.slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s}
		.slider:before {position: absolute; content: ''; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s}
		input:checked+.slider {background-color: hsl(207, 90%, 40%)}
		input:focus+.slider {box-shadow: 0 0 1px hsl(207, 90%, 40%)}
		input:checked+.slider:before {-webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px)}
		.switch input {display: none}
		.slider.round {border-radius: 34px}
		.slider.round:before {border-radius: 50%}
		input:disabled+.slider {background-color: #aaa}

		dialog[open] {
			font-family: verdana; 
			font-size: 28px; 
			color: white;
			background-color:rgb(200 0 0 / 0.90);
			border: solid rgb(200 0 0 / 0.90) 0px;
			border-radius: 12px;
			/*
			position: absolute;
			  left: 50%;
			  top: 50%;
			  transform: translate(-50%, -50%);
			*/
		  }

	</style>

	<body>

		<br><h1>Example 04 - user interface with style</h1>
		<hr />

		<!-- error message -->
		<dialog id="errDialog"></dialog>

		<div class='d1'>
			<div class='d2'>&nbsp;Led</div>
			<div class='d3'>
				<label class='switch'><input type='checkbox' id='ledSwitch' disabled onClick='turnLed(this.checked)'><div class='slider round'></div></label>
			</div>
		</div>
		<hr />

		<script type='text/javascript'>

			// mechanism that makes REST calls and get their replies
			var httpClient = function () {
				this.request = function (url, method, callback) {
					var httpRequest = new XMLHttpRequest ();
					var httpRequestTimeout = null;
					
					httpRequest.onreadystatechange = function () {
						// console.log (httpRequest.readyState);
						if (httpRequest.readyState == 1) { // 1 = OPENED, start timing
							clearTimeout (httpRequestTimeout);
							httpRequestTimeout = setTimeout (function () { 
								// alert ('Server did not reply (in time).'); 
								errorMessage ('Server did not reply (in time).');
							}, 5000);
						}
						if (httpRequest.readyState == 4) { // 4 = DONE, call callback function with responseText
							clearTimeout (httpRequestTimeout);
							switch (httpRequest.status) {
								case 200: 	callback (httpRequest.responseText); // 200 = OK
											break;
								case 0:		break;
								default: 	// alert ('Server reported error ' + httpRequest.status + ' ' + httpRequest.responseText); // some other reply status, like 404, 503, ...
											errorMessage ('Server reported error ' + httpRequest.status + ' ' + httpRequest.responseText);
											break;
							}
						}
					}
					httpRequest.open (method, url, true);
					httpRequest.send (null);
				}
			}

			var client = new httpClient ();

			// error message
			var errorMessageTimeout = null;
			function errorMessage (msg) {
				clearTimeout (errorMessageTimeout);
				document.getElementById ('errDialog').textContent = msg;
				document.getElementById ('errDialog').showModal ();
				errorMessageTimeout = setTimeout (function () {
					document.getElementById ('errDialog').close ();
				}, 3000);				
			}

			// make a REST call and initialize/populate this page
			var client = new httpClient ();
			client.request ('/builtInLed', 'GET', function (json) {
				// json reply will be in a form: {"id":"ESP32_SRV","builtInLed":"on"}
				var obj = document.getElementById ('ledSwitch'); 
				obj.disabled = false; 
				obj.checked = (JSON.parse (json).builtInLed == 'on');
			});

			function turnLed (switchIsOn) { // send desired led state to ESP and refresh ledSwitch state
				client.request (switchIsOn ? '/builtInLed/on' : '/builtInLed/off' , 'PUT', function (json) {
					var obj = document.getElementById ('ledSwitch'); 
					obj.checked = (JSON.parse (json).builtInLed == 'on');                                                           
				});
			}

		</script>
	</body>
</html>
